<template>
    <div id="app" class="unusualTask">
        <div class="main">
            <div class="addcont" v-loading="loading" element-loading-text="拼命加载中">
                <h1>新增任务</h1>
                <ul class="addcontUl">
                    <li>
                        <div><small>*</small>事件ID：</div>
                        <div>
                            <input type="text" v-model="addObj.eventId" placeholder="请输入事件Id">
                        </div>
                    </li>
                    <li>
                        <div><small>*</small>服务名称：</div>
                        <div>
                            <input type="text" v-model="addObj.appName" placeholder="请输入服务名称">
                        </div>
                    </li>
                    <li>
                        <div><small>*</small>任务类型：</div>
                        <div>
                            <select @change="typeChange" v-model="addObj.jobType">
                              <option v-for="(type,index) in jobTypes">{{type}}</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <div><small>*</small>任务名称：</div>
                        <div>
                            <input type="text" v-model="addObj.jobName" placeholder="请输入任务名称">
                        </div>
                    </li>
                    <li class="datetimeLi" v-show="isDatetimeLi == 0">
                        <div><small>*</small>任务时间：</div>
                        <div>
                            <template>
                                <div class="block">
                                    <el-date-picker class="block" @change="dateTimeChangeA" v-model="dateValueA" type="datetime" placeholder="选择日期时间">
                                    </el-date-picker>
                                </div>
                            </template>
                        </div>
                    </li>
                    <li class="datetimeLi" v-show="isDatetimeLi == 1">
                        <div>任务时间：</div>
                        <div>
                            <template>
                                <div class="block">
                                    <el-date-picker class="block" @change="dateTimeChangeB" v-model="dateValueB" type="datetimerange" placeholder="选择时间范围">
                                    </el-date-picker>
                                </div>
                            </template>
                        </div>
                    </li>
                    <li class="cronLi" v-show="isCronLi == 2">
                        <div>Cron任务：</div>
                        <div>
                            <input type="text" v-model="addObj.cron" placeholder="请输入cron正则">
                        </div>
                    </li>
                    <li>
                        <div>失败消息：</div>
                        <div>
                            <input type="text" v-model="addObj.errMsg" placeholder="请输入失败返回消息">
                        </div>
                    </li>
                    <li>
                        <div>重试延迟时间：</div>
                        <div>
                            <input type="text" v-model="addObj.delayTime" placeholder="请输入延迟时间，默认为三分钟">
                        </div>
                    </li>
                    <li>
                        <div>重试次数：</div>
                        <div>
                            <input type="text" v-model="addObj.repeatCount" placeholder="请输入重试次数">
                        </div>
                    </li>
                    <li class="promptLi">
                        <div></div>
                        <div class="prompt">
                            {{proStr}}
                        </div>
                    </li>
                    <li class="lastLi">
                        <div @click="addClick">
                            添加
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default {
        name: 'addJob',
        data() {
            return {
                proStr: '带红色 * 号的不能为空',
                loading: false,
                generateId: 0,
                jobTypes: [
                    '0',
                    '1',
                    '2'
                ],
                isCronLi: 9,
                isDatetimeLi: 0,
                dateValueA: '',
                dateValueB: '',
                addObj: {
                    eventId: '',
                    appName: '',
                    jobType: '0',
                    jobName: '',
                    startTime: '',
                    endTime: '',
                    cron: '',
                    errMsg: '',
                    delayTime: '',
                    repeatCount: ''
                }
            }
        },
        sockets: {
            // 取消事件
            s_t_ts_c_w_job_cancel: function (data) {
                console.log('add监听取消.', data)
                const h = this.$createElement;
                var dataObj = JSON.parse(data)
                this.$notify({
                    title: dataObj.appName + ' 的任务已经取消',
                    message: h('p', { style: 'color: #333' }, '事件ID：' + dataObj.eventId + '。' + '任务名称：' + dataObj.jobName)
                })
            },
            // 完成事件
            s_t_ts_c_w_job_complete: function (data) {
                console.log('add监听完成.', data)
                const h = this.$createElement;
                var dataObj = JSON.parse(data)
                this.$notify({
                    title: dataObj.appName + ' 的任务已经完成',
                    message: h('p', { style: 'color: #333' }, '事件ID：' + dataObj.eventId + '。' + '任务名称：' + dataObj.jobName)
                })
            }
        },
        created: function () {
        },
        filters: {
            ctimeFun: function (val) {
                var now = new Date(val)
                var year = now.getYear() - 100;
                var month = now.getMonth() + 1;
                month = month > 9 ? month : "0" + month
                var date = now.getDate();
                date = date > 9 ? date : "0" + date
                var hour = now.getHours();
                hour = hour > 9 ? hour : "0" + hour
                var minute = now.getMinutes();
                minute = minute > 9 ? minute : "0" + minute
                return "20" + year + "-" + month + "-" + date + "   " + hour + ":" + minute;
            }
        },
        methods: {
            // 只能为英文或者数字正则
            enRegFun: function (str) {
                var regu = '^[A-Za-z0-9]+$'
                var re = new RegExp(regu);
                if (re.test(str)) {
                    return true;
                } else {
                    return false;
                }
            },
            // 转化时间戳
            dataTimeFun(val) {
                var str = val;
                str = str.replace(/ GMT.+$/, '');
                var d = new Date(str);
                var a = [d.getFullYear(), d.getMonth() + 1, d.getDate(), d.getHours(), d.getMinutes(), d.getSeconds()];
                for (var i = 0, len = a.length; i < len; i++) {
                    if (a[i] < 10) {
                        a[i] = '0' + a[i];
                    }
                }
                str = a[0] + '-' + a[1] + '-' + a[2] + ' ' + a[3] + ':' + a[4] + ':' + a[5];
                var temp = str.split(' ');
                var arr = temp[0].split('-');
                var brr = temp[1].split(':');
                var timestamp = new Date(Date.UTC(arr[0], arr[1] - 1, arr[2], +brr[0] - 8, brr[1], brr[2]));
                var timestamp = timestamp.getTime() / 1000;
                return timestamp
            },
            // 类型选择
            typeChange() {
                switch (this.addObj.jobType) {
                    case '0':
                        this.isDatetimeLi = 0
                        this.isCronLi = 4
                        break;
                    case '1':
                        this.isDatetimeLi = 1
                        this.isCronLi = 4
                        break;
                    case '2':
                        this.isDatetimeLi = 4
                        this.isCronLi = 2
                        break;
                    default:
                        break;
                }
            },
            // 0 类型 获取时间
            dateTimeChangeA(val) {
                this.addObj.startTime = val = val.replace(/-/g, "/");
            },
            // 1 类型 获取时间
            dateTimeChangeB(val) {
                var vals = val.split(' ')
                var strStr = vals[0] + ' ' + vals[1]
                var endStr = vals[3] + ' ' + vals[4]
                this.addObj.startTime = strStr = strStr.replace(/-/g, "/")
                this.addObj.endTime = endStr = endStr.replace(/-/g, "/")
            },
            // 点击添加
            addClick() {
                var self = this
                var listObj = this.addObj
                console.log(this.addObj.startTime)
                if (listObj) {
                    var obj = {}
                    for (var key in listObj) {
                        if (listObj[key].length > 0) {
                            obj[key] = listObj[key]
                        }
                    }
                    if (obj.appName && obj.eventId && obj.jobType && obj.jobName) {
                        var appTrue = this.enRegFun(obj.appName)
                        var jobTrue = this.enRegFun(obj.jobName)
                        if (appTrue && jobTrue) {
                            if (obj.jobType == 0 && obj.startTime) {
                                self.loading = true
                                self.addJob(obj)
                                    .then((data) => {
                                        console.log(data)
                                        self.loading = false
                                        if (data.code == 200) {
                                            self.$message('添加成功')
                                            self.addObj.appName = ''
                                            self.addObj.eventId = ''
                                            self.addObj.jobType = '0'
                                            self.addObj.jobName = ''
                                            self.addObj.startTime = ''
                                        } else {
                                            self.$message(data.message)
                                        }
                                    }).catch(msg => {
                                        console.log(msg)
                                        switch (msg.status) {
                                            case 500:
                                                break;
                                            case 504:
                                                break;
                                            default:
                                                break;
                                        }
                                    })
                            } else if (obj.jobType == 1) {
                                self.loading = true
                                self.addJob(obj)
                                    .then((data) => {
                                        console.log(data)
                                        self.loading = false
                                        if (data.code == 200) {
                                            self.$message('添加成功')
                                            self.addObj.appName = ''
                                            self.addObj.eventId = ''
                                            self.addObj.jobType = '0'
                                            self.addObj.jobName = ''
                                            self.addObj.startTime = ''
                                            self.addObj.endTime = ''
                                        }
                                    }).catch(msg => {
                                        console.log(msg)
                                        switch (msg.status) {
                                            case 500:
                                                break;
                                            case 504:
                                                break;
                                            default:
                                                break;
                                        }
                                    })
                            } else if (obj.jobType == 2) {
                                self.loading = true
                                self.addJob(obj)
                                    .then((data) => {
                                        console.log(data)
                                        self.loading = false
                                        if (data.code == 200) {
                                            self.$message('添加成功')
                                            self.addObj.appName = ''
                                            self.addObj.eventId = ''
                                            self.addObj.jobType = '0'
                                            self.addObj.jobName = ''
                                            self.addObj.startTime = ''
                                            self.addObj.endTime = ''
                                        }
                                    }).catch(msg => {
                                        console.log(msg)
                                        switch (msg.status) {
                                            case 500:
                                                break;
                                            case 504:
                                                break;
                                            default:
                                                break;
                                        }
                                    })
                            } else {
                                if (!obj.startTime) {
                                    self.proStr = '任务时间不能为空'
                                }
                            }
                        } else {
                            if (!appTrue) {
                                self.proStr = '服务名称只能为英文数字组合'
                            } else if (!jobTrue) {
                                self.proStr = '服务名称只能为英文数字组合'
                            }
                        }
                    } else {
                        if (!obj.appName) {
                            self.proStr = '服务名称不能为空'
                        } else if (!obj.eventId) {
                            self.proStr = '服务ID不能为空'
                        } else if (!obj.jobType) {
                            self.proStr = '服务类型不能为空'
                        } else if (!obj.jobName) {
                            self.proStr = '任务名称不能为空'
                        }
                    }
                }

            },
          ...mapActions(['addJob'])
        }
    }

</script>

<style scoped>
    .main {
        width: 100%;
        min-height: 600px;
    }
    
    .addcont {
        margin: 0px auto;
        width: 800px;
        min-height: 600px;
        border: 1px solid #ccc;
        overflow: hidden;
        background-color: #fff;
        border-radius: 3px;
    }
    
    .addcont>h1 {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 55px;
        font-size: 22px;
        border-bottom: 1px solid #ccc;
        line-height: 55px;
        padding-left: 25px;
    }
    
    .addcontUl>li {
        height: 55px;
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
    }
    
    .addcontUl>li>div:nth-child(1) {
        width: 280px;
        text-align: right;
        padding-right: 30px;
        font-size: 15px;
    }
    
    .addcontUl>li>div:nth-child(1) small {
        color: red;
        margin-right: 5px;
        font-size: 15px;
    }
    
    .addcontUl>li>div:nth-child(2) {}
    
    .addcontUl>li>div:nth-child(2) input {
        width: 380px;
        height: 36px;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding-left: 5px;
        line-height: 33px;
    }
    
    .promptLi {}
    
    .prompt {
        font-size: 16px;
        color: red;
    }
    
    .prompt small {
        color: red;
        font-size: 20px;
    }
    
    .addcontUl .lastLi {
        margin-top: 25px;
        display: flex;
        justify-content: flex-end;
    }
    
    .addcontUl .lastLi>div:nth-child(1) {
        border: 1px solid #ccc;
        padding: 0;
        width: 120px;
        height: 45px;
        font-size: 22px;
        line-height: 45px;
        text-align: center;
        margin-right: 45px;
        border-radius: 3px;
        background-color: #13ce66;
        color: #c0ccda;
        cursor: pointer;
    }
    
    .addcontUl>li:nth-child(1)>div:nth-child(2) small {
        font-size: 14px;
        padding: 4px;
        border: 1px solid #eee;
        cursor: pointer;
    }
    
    .addcontUl>li:nth-child(1)>div:nth-child(2) small:nth-child(2) {
        border-radius: 3px;
        border: 1px solid #ccc;
        margin-left: 55px;
        cursor: pointer;
    }
    
    .block {
        width: 380px;
    }
    
    .addcontUl>li>div:nth-child(2) select {
        width: 110px;
        height: 34px;
        border: 1px solid #ccc;
        border-radius: 3px;
        line-height: 34px;
        text-align: center;
        padding-left: 5px;
    }
</style>